<template>
  <div class="app-container">
    <div class="main">
      <div class="main-left">
        <div class="main-left_top">
          <h2>扫码出库确认页面</h2>
          <el-form @submit.native.prevent :inline="true" :model="formData" size="small">
            <el-form-item label="包裹号扫码查询出库">
              <el-input
                size="small"
                style="width: 300px"
                ref="inputRef"
                @change="getscanPackageNo"
                v-model="formData.input"
                placeholder="请输入内容"
              >
                <template #append>
                  <el-button type="primary" @click="getscanPackageNo"> 查询 </el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item> </el-form-item>
          </el-form>
        </div>
        <div class="main-left_bot">
          <div>
            待处理包裹数量: <span style="color: red">{{ detail.isHandleNum }}</span> 个
          </div>
          <div>今天已处理包裹数量: {{ detail.isHandleNumDay }} 个</div>
        </div>
      </div>
      <div class="main-right">
        <div
          style="
            margin: 15px 0;
            font-weight: bold;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
          "
        >
          <span>最近出库包裹</span>
          <span>临期时长：{{ ThresholdTimeLimit }}天</span>
          <el-button @click="openThresholdTimeLimit" v-hasPermi="['distribution:dict:edit']" size="small">
            设置临期时长
          </el-button>
          <span>过期时长：{{ expiredTimeDictValue }}天</span>
          <el-button @click="openOverdueTimeLimit" v-hasPermi="['distribution:dict:edit']" size="small">
            设置过期时长
          </el-button>
        </div>
        <el-table
          style="width: 100%"
          :height="isMobile ? 500 : calTableHeight() - 50"
          v-loading="loading"
          ref="TableRef"
          :data="tableData"
        >
          <el-table-column show-overflow-tooltip :label="$t('包裹号')" align="center" prop="packageNo" />
          <el-table-column show-overflow-tooltip label="出库时间" align="center" prop="outWarehouseTime" />
          <el-table-column show-overflow-tooltip label="出库状态" align="center" prop="outStatus">
            <template slot-scope="{ row }">
              <span v-if="row.isOutWarehouse == 0" style="color: red">未出库</span>
              <span v-if="row.isOutWarehouse == 1" style="color: #13ce66">已出库</span>
            </template>
          </el-table-column>

          <el-table-column show-overflow-tooltip label="操作人" align="center" prop="outWarehouseUserName" />
          <!-- <el-table-column :label="$t('操作')" align="center">
            <template slot-scope="scope">
              <el-button type="text">库位追加</el-button>
            </template>
          </el-table-column> -->
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <el-dialog
      :visible.sync="PackageDetails"
      title="包裹详情"
      fullscreen
      destroy-on-close
      modal
      :before-close="
        () => {
          PackageDetails = false
          handleFocus()
          initDialog()
        }
      "
      :close-on-click-modal="false"
    >
      <hr />
      <div class="headerPrint">
        <div></div>
        <div>
          <el-button
            @click="handlePrintOrderPackageCache"
            v-hasPermi="['distribution:orderPackage:printOrderPackageCache']"
          >
            打印剩余库位数量
          </el-button>
          <el-button @click="gethangUpPackage" v-hasPermi="['distribution:orderPackage:hangUpPackage']">
            挂起包裹
          </el-button>
          <el-button @click="getreleaseScratchPackage" v-hasPermi="['distribution:orderPackage:releaseScratchPackage']">
            释放包裹
          </el-button>
        </div>

        <div>
          <el-button
            v-print="printContent"
            v-show="baseDataForm.deliveryTypeFinal == 1"
            v-hasPermi="['distribution:orderPackage:poPackagePrint']"
          >
            打印邮局面单
          </el-button>
        </div>
      </div>
      <div class="articleModal">
        <el-card shadow="never">
          <el-card class="leftContent" shadow="never">
            <div>包裹号：{{ baseDataForm.packageNo }}</div>
            <div>收货人名称：{{ baseDataForm.receiveName }}</div>
            <div>收货人电话：{{ baseDataForm.receivePhone }}</div>
            <div>收货人邮编：{{ baseDataForm.receivePostcode }}</div>
            <div>收货地址：{{ baseDataForm.address }}</div>
            <div>运输方式：{{ baseDataForm.deliveryWayFinal }}</div>

            <div>
              运输类型：
              <span v-if="baseDataForm.deliveryTypeFinal == 1"> 邮局</span>
              <span v-if="baseDataForm.deliveryTypeFinal == 2"> 黑猫</span>
              <span v-if="baseDataForm.deliveryTypeFinal == 3"> 佐川</span>
            </div>
            <div>包裹份数：{{ baseDataForm.packageNum }}</div>
          </el-card>
          <el-card class="leftContent" shadow="never">
            出库情况：
            <span v-if="baseDataForm.outStatus == 0" style="color: red">未出库</span>
            <span v-if="baseDataForm.outStatus == 1" style="color: #13ce66">已出库</span>
          </el-card>
          <el-card class="leftContent" shadow="never">
            <div>注文番号：</div>
            <div class="annotated" style="height: 200px">
              <div v-for="(item, indexx) in baseDataForm.orderList">
                {{ item.orderNo }}
              </div>
            </div>
          </el-card>
        </el-card>
        <el-card class="centerContent" shadow="never">
          <el-table :height="isMobile ? 300 : calTableHeight() - 50" ref="TableRef" :data="baseDataForm.skus">
            <el-table-column :label="$t('库位号')" align="center" prop="spNo" width="110"></el-table-column>
            <el-table-column :label="$t('图片')" align="center">
              <template slot-scope="{ row }">
                <el-image
                  style="width: 35px; height: 35px"
                  fit="contain"
                  :key="Math.random()"
                  v-hover="row.imgUrl"
                  :src="row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
                />
              </template>
            </el-table-column>
            <el-table-column :label="$t('sku编号')" align="center" prop="skuNo" width="110"></el-table-column>
            <el-table-column label="出库数量" align="center" prop="orderSkuNum"></el-table-column>
            <el-table-column label="确认数量" align="center" prop="num"></el-table-column>
            <el-table-column label="箱规/整箱" align="center" prop="box">
              <template slot-scope="{ row }">
                <span>{{ row.box }} &emsp;/ &emsp;{{ Math.floor(row.num / row.box) }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-card shadow="never">
            <div style="display: flex; justify-content: space-around">
              <span> 出库总数量:{{ baseDataForm.outTotalNum }}</span>
              <span> 确认总数量:{{ ParcelList.length }}</span>
            </div>
          </el-card>
        </el-card>
        <el-card class="rightContent" v-if="baseDataForm.outStatus !== 1" shadow="never">
          <div style="margin: 10px">
            <span>扫码确认：</span>
            <el-input
              ref="inputRef2"
              size="small"
              clearable
              @change="changeScancode"
              style="width: 300px"
              v-model="formData.id"
            ></el-input>
          </div>
          <el-table :height="isMobile ? 300 : calTableHeight() - 50" ref="TableRef" :data="ParcelList">
            <el-table-column label="条形码" width="170" align="center" prop="id"></el-table-column>
            <el-table-column :label="$t('库位号')" width="120" align="center" prop="spNo"></el-table-column>
            <el-table-column label="出库情况" align="center" prop="id">
              <template slot-scope="{ row }">
                <span v-if="row.status == 0">未出库</span>
                <span v-if="row.status == 1" style="color: red">已出库</span>
                <span v-if="row.status == 2" style="color: red">不在此包裹里</span>
                <span v-if="row.status == 3" style="color: red">未上架</span>
                <span v-if="row.status == 4" style="color: red">临期问题</span>
                <span v-if="row.status == 5" style="color: red">过期问题</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('过期时间')" align="center" prop="expiredTime">
              <template slot-scope="{ row }">
                <span v-if="row.expiredTime">
                  {{ row.expiredTime.split(' ')[0] }}
                </span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('操作')" align="center">
              <template slot-scope="scope">
                <el-popconfirm
                  @confirm="clickDelete(scope.row, scope.$index)"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除吗？"
                >
                  <el-link type="danger" slot="reference">删除</el-link>
                </el-popconfirm>
                <el-popconfirm
                  v-if="scope.row.isOutbound == 0 && scope.row.status == 4"
                  @confirm="outboundDelivery(scope.row)"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定出库?"
                >
                  <el-link type="danger" slot="reference">确定出库</el-link>
                </el-popconfirm>
                <div v-if="scope.row.isOutbound == 1">已确认</div>
              </template>
            </el-table-column>
          </el-table>
          <!-- <el-button
            class="submitBtn"
            type="primary"
            v-hasPermi="['distribution:orderPackage:confirm']"
            @click="submitList">
            全部扫码确认上传
          </el-button> -->
          <el-input
            v-hasPermi="['distribution:orderPackage:confirm']"
            v-model="packageNo"
            ref="packageSubmit"
            clearable
            placeholder="请输入包裹号"
            @keydown.enter.native="submitList"
          ></el-input>
        </el-card>
        <el-card shadow="never" class="select" v-if="baseDataForm.outStatus !== 1">
          <div style="margin-bottom: 10px; display: flex; justify-content: space-between">
            <div>包装耗材选择:</div>
            <div><el-checkbox v-model="skuConsumableRecommendFlag">是否记录</el-checkbox></div>
          </div>
          <div class="add-item" v-for="(item, index) in selectedPackagingsArr">
            <div>
              {{ item.cesName }}
            </div>
            <i @click="selectedPackagingsArr.splice(index, 1)" class="el-icon-close close-icon"></i>
          </div>
          <div class="add-btn" @click="handleOpenSelectedPackagings">
            <i class="el-icon-plus"></i>
          </div>
        </el-card>
      </div>
    </el-dialog>

    <el-dialog
      title="包装耗材选择"
      :visible.sync="selectedPackagings.show"
      :width="isMobile ? '90%' : '600px'"
      destroy-on-close
      :modal="true"
      :close-on-click-modal="false"
    >
      <el-select multiple v-model="selectedPackagings.selectArr" :style="{ width: '85%' }" clearable>
        <el-option
          :disabled="handleElOptionDisabled(item)"
          :label="item.cesName"
          :key="item.id"
          :value="item.id"
          v-for="item in selectedPackagings.list"
        >
          <div style="display: flex; align-items: center">
            <el-image
              style="width: 30px; height: 30px; margin-right: 5px"
              fit="contain"
              :src="item.cesImg + '?x-oss-process=image/resize,w_100/quality,q_70'"
            />
            <div>{{ item.cesName }}</div>
          </div>
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selectedPackagings.show = false">取 消</el-button>
        <el-button type="primary" @click="handleSelectedPackagings">确 定</el-button>
      </span>
    </el-dialog>
    <showExpressSheet ref="showExpressSheetref" :packageNo="baseDataForm.packageNo" v-if="PackageDetails" />
    <el-dialog :title="title" :before-close="closesubmitLimitDay" :visible.sync="isShowLimitDay" width="400px">
      <div style="display: flex; align-items: center">
        <el-input type="number" style="width: 300px; margin-right: 10px" v-model="ThresholdTimeLimitValue" />单位:天
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closesubmitLimitDay">取 消</el-button>
        <el-button type="primary" @click="submitLimitDayGetDictList">确 定</el-button>
      </span>
    </el-dialog>
    <PrintSpNoLeftNumber :show.sync="printSpNoLeftNumber.show" :formData="printSpNoLeftNumber.formData" />
  </div>
</template>

<script>
import { listNoPageByOrder } from '@/api/distribution/sku/packingInformation'

import {
  editDict,
  getHandleNum,
  getOrderPackageScanList,
  hangUpPackage,
  orderPackageConfirm,
  printOrderPackageCache,
  releaseScratchPackage,
  scanPackageNo,
  scanSkuSeriaNo,
} from '@/api/distribution/sku/ScanCodeOutOfStorage'
import { useDict } from '@/utils/useDict'
import Print from 'vue-print-nb'
import showExpressSheet from './components/showExpressSheet.vue'
import PrintSpNoLeftNumber from './components/printSpNoLeftNumber.vue'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  components: {
    showExpressSheet,
    PrintSpNoLeftNumber,
  },
  name: 'ScanCodeOutOfStorage',
  directives: {
    Print,
  },
  data() {
    return {
      printSpNoLeftNumber: {
        show: false,
        formData: {},
      },
      title: '设置临期时长',
      expiredTimeDictValue: '',
      expiredTimeDictCode: '',
      dictCode: '',
      /**临期日期设置 */
      isShowLimitDay: false,
      /** 临期时间限制*/
      ThresholdTimeLimit: '',
      ThresholdTimeLimitValue: '',
      /**耗材是否记录: 0：不记录 1：记录 */
      skuConsumableRecommendFlag: false,
      printContent: {
        id: 'printTests',
        preview: false, // 预览工具是否启用
        previewTitle: '面单', // 预览页面的标题
        popTitle: '面单', // 打印页面的页眉
        previewBeforeOpenCallback() {},
        previewOpenCallback() {},
        beforeOpenCallback(vue) {
          vue.printLoading = true
        },
        openCallback(vue) {
          vue.printLoading = false
        },
        closeCallback(vue) {
          console.log('预览页面关闭')
          vue.handleFocus('inputRef2')
        },
        clickMounted(vue) {
          console.log('预览页面开启')
        },
      },

      showExpressSheetData: {
        show: false,
        packageNo: '',
      },
      packageNo: '',
      /**选定的包装 */
      selectedPackagingsArr: [],
      selectedPackagings: {
        show: false,
        selectArr: [],
        list: [],
      },
      loading: false,
      tableData: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
      },
      detail: {},
      /**包裹详情 */
      baseDataForm: {},
      ParcelList: [],
      formData: {
        input: '',
        id: '',
      },
      PackageDetails: false,
      list: [],
    }
  },

  computed: {
    /**包装耗材选择是否能选择 */
    canSelect() {},

    isMobile() {
      const userAgent = navigator.userAgent.toLowerCase()
      const mobileAgents = ['android', 'webos', 'iphone', 'ipad', 'blackberry', 'windows phone']
      const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0
      const windowWidth = window.innerWidth || document.documentElement.clientWidth
      const windowHeight = window.innerHeight || document.documentElement.clientHeight

      for (let i = 0; i < mobileAgents.length; i++) {
        if (userAgent.includes(mobileAgents[i])) {
          return true
        }
      }

      if (isTouch) {
        return true
      }

      if (windowWidth < 768 && windowHeight < 1024) {
        return true
      }

      return false
    },
  },

  mounted() {
    this.getList()
    this.getHandleNum()
    this.handleFocus()
    this.LimitDayGetDictList()
  },

  methods: {
    /**释放包裹 */
    getreleaseScratchPackage() {
      if (this.ParcelList.length == 0) {
        releaseScratchPackage({ packageNo: this.baseDataForm.packageNo }).then((res) => {
          this.ParcelList = res.data
          this.mathStorageLocation()
        })
      } else {
        this.$message({
          type: 'error',
          message: '扫码确认列表为空才能释放包裹',
        })
      }
    },
    /**挂起包裹绑定sku */
    gethangUpPackage() {
      const data = {
        packageNo: this.baseDataForm.packageNo,
        serList: this.ParcelList,
      }
      if (this.ParcelList.length !== 0) {
        hangUpPackage(data).then((res) => {
          this.$message({
            type: 'success',
            message: '操作成功',
          })
        })
      } else {
        this.$message({
          type: 'error',
          message: '扫码确认列表为空不能挂起包裹',
        })
      }
    },
    handlePrintOrderPackageCache() {
      const data = {
        packageNo: this.baseDataForm.packageNo,
        serList: this.ParcelList,
      }
      printOrderPackageCache(data).then((res) => {
        this.printSpNoLeftNumber.formData = res.data
        this.printSpNoLeftNumber.show = true
      })
    },
    closesubmitLimitDay() {
      this.ThresholdTimeLimitValue = ''
      this.isShowLimitDay = false
    },
    /**设置临期时间 */
    openThresholdTimeLimit() {
      this.isShowLimitDay = true
      this.title = '设置临期时长'
      this.dictCode = this.ThresholdTimeDictCode
    },
    /**设置过期时间 */
    openOverdueTimeLimit() {
      this.isShowLimitDay = true
      this.title = '设置过期时间'
      this.dictCode = this.expiredTimeDictCode
    },
    /**提交设置时间 */
    submitLimitDayGetDictList() {
      if (this.ThresholdTimeLimitValue) {
        editDict({
          dictCode: this.dictCode,
          dictValue: Number(this.ThresholdTimeLimitValue),
        }).then((res) => {
          this.$message({
            type: 'success',
            message: '设置成功',
          })
          this.LimitDayGetDictList()
          this.closesubmitLimitDay()
        })
      }
    },
    /**获取临期时间字典和过期字典 */
    LimitDayGetDictList() {
      useDict('near_time').then((res) => {
        this.ThresholdTimeLimit = res.near_time[0].dictValue
        this.ThresholdTimeDictCode = res.near_time[0].dictCode
      })
      useDict('expired_time').then((res) => {
        this.expiredTimeDictValue = res.expired_time[0].dictValue
        this.expiredTimeDictCode = res.expired_time[0].dictCode
      })
    },
    isPost() {
      if (this.baseDataForm.deliveryTypeFinal !== 1) {
      }
    },
    /**下载面单 */
    print() {
      this.showExpressSheetData.show = true
      this.$refs.showExpressSheetref.getData()
    },
    handleFocus(ref = 'inputRef') {
      this.$nextTick(() => this.$refs[ref]?.focus())
    },
    handleElOptionDisabled(item) {
      const index = this.selectedPackagingsArr.findIndex((i) => i.id == 0)
      return index > -1
    },
    handleOpenSelectedPackagings() {
      this.selectedPackagings.selectArr = []
      listNoPageByOrder().then((res) => {
        this.selectedPackagings.list = res.data
        this.selectedPackagings.list.unshift({
          cesName: this.$t('无耗材'),
          id: 0,
        })
        this.selectedPackagings.show = true
      })
    },
    handleSelectedPackagings() {
      // 判断是否选择 "无耗材"
      let isSelectNo = false
      this.selectedPackagings.selectArr.map((id) => {
        if (id == 0) {
          isSelectNo = true
        }
        const index = this.selectedPackagingsArr.findIndex((i) => i.id == id)
        if (index == -1) {
          const item = this.selectedPackagings.list.filter((i) => i.id == id)
          this.selectedPackagingsArr.push(item[0])
        }
      })
      // 判断是否选择 "无耗材"
      if (isSelectNo) {
        this.selectedPackagingsArr = [
          {
            cesName: this.$t('无耗材'),
            id: 0,
          },
        ]
      }
      this.handleFocus('packageSubmit')

      this.skuConsumableRecommendFlag = true
      this.selectedPackagings.show = false
    },
    getHandleNum() {
      getHandleNum().then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.detail = res.data
        }
      })
    },
    getList() {
      getOrderPackageScanList(this.queryParams).then((res) => {
        const { code, rows } = res
        if (code === 200) {
          this.tableData = rows
          this.total = res.total
        }
      })
    },
    /**重置弹框 */
    initDialog() {
      this.baseDataForm = {}
      this.list = []
      this.ParcelList = []
      this.formData = {
        input: '',
        id: '',
      }
    },
    /**提交扫码确认列表 */
    submitList(value) {
      if (this.packageNo == this.baseDataForm.packageNo) {
        if (this.selectedPackagingsArr.length == 0) {
          return this.$message({ type: 'error', message: this.$t('请选择包装耗材') })
        }

        let scanIdList = []
        this.ParcelList.forEach((item) => {
          scanIdList.push({
            ser: item.id,
            status: item.status,
            isOutbound: item.isOutbound,
          })
        })
        const cesIdList = this.selectedPackagingsArr.map((i) => i.id)?.filter((item) => item != 0)

        const data = {
          packageNo: this.baseDataForm.packageNo,
          scanIdList,
          cesIdList,
          /**耗材是否记录: 0：不记录 1：记录 */
          skuConsumableRecommendFlag: this.skuConsumableRecommendFlag ? 1 : 0,
        }

        orderPackageConfirm(data).then((res) => {
          this.$message({ type: 'success', message: res.msg })

          this.initDialog()
          this.PackageDetails = !this.PackageDetails
          this.getList()
          this.getHandleNum()
          this.handleFocus()
          this.packageNo = null
        })
      } else if (this.packageNo && this.packageNo !== this.baseDataForm.packageNo) {
        this.$message({ type: 'error', message: this.$t('请扫描正确的包裹号') })
      }
    },
    /**计算库位号对应数量 */
    mathStorageLocation() {
      this.baseDataForm.skus.forEach((item, index) => {
        item.num = 0
        this.ParcelList.forEach((itemInner) => {
          console.log(item.spNo, itemInner.spNo)
          if (item.spNo == itemInner.spNo) {
            console.log(item.num)
            item.num++
          }
        })
      })
    },
    /**删除条形码 */
    clickDelete(row, index) {
      this.ParcelList.splice(index, 1)
      this.mathStorageLocation()
      this.$message.success('操作成功')
    },
    /**确认出库 */
    outboundDelivery(row) {
      this.ParcelList.forEach((item) => {
        if (item.id == row.id) {
          item.isOutbound = 1
        }
      })
    },
    /**查询订单 */
    changeScancode() {
      scanSkuSeriaNo({
        packageNo: this.formData.input,
        id: this.formData.id,
      }).then((res) => {
        let IdFlage = false
        this.ParcelList.forEach((item) => {
          if (item.id == res.data.id) {
            IdFlage = true
          }
        })
        if (IdFlage) {
          this.$message({ type: 'error', message: this.$t('该条形码已存在') })
        } else {
          res.data.isOutbound = 0

          this.ParcelList.unshift(res.data)
        }
        if (this.ParcelList.length == this.baseDataForm.outTotalNum) {
          this.handleFocus('packageSubmit')
        }
        this.mathStorageLocation()
        this.formData.id = ''
      })
    },
    /**获取包裹基本信息 */
    async getscanPackageNo() {
      if (this.formData.input) {
        await scanPackageNo({ packageNo: this.formData.input }).then((res) => {
          this.baseDataForm = {
            ...res.data,
          }
          // 1.订单扫码出库详情： isOutWarehouse 状态为0 未出库时 才获取 skuConsumableVoList 并且 skuConsumableVoList 不为空时
          if (res.data.isOutWarehouse == 0 && res.data.skuConsumableList && res.data.skuConsumableList.length > 0) {
            this.selectedPackagingsArr = res.data.skuConsumableList.map((i) => {
              return {
                cesName: i.cesName,
                id: i.id,
              }
            })
          } else {
            this.selectedPackagingsArr = [
              {
                cesName: this.$t('无耗材'),
                id: 0,
              },
            ]
          }
          this.baseDataForm.skus.forEach((element, index) => {
            this.$set(this.baseDataForm.skus[index], 'num', 0)
          })
          this.PackageDetails = !this.PackageDetails

          this.handleFocus('inputRef2')
        })
        if (this.PackageDetails && this.baseDataForm.deliveryTypeFinal == 1) {
          this.print()
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.pritcontent {
  border: solid 2px black;
  border-radius: 4px;
  padding: 20px;
}

.headerPrint {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
::v-deep .el-dialog__body {
  padding: 0px 20px 20px 20px;
}
.submitBtn {
  margin: 6px;
  float: right;
}

.articleModal {
  display: flex;
  height: 100%;

  .leftContent {
    // flex: 1.5;
    width: 300px;
    .el-card__body {
      & > div {
        height: 40px;
        width: 100%;
      }
    }
  }

  .centerContent {
    flex: 2.4;
  }

  .rightContent {
    flex: 2.6;
  }
  .select {
    flex: 1;
    // .add-btn{
    //   &:hover{

    //     border:2px solid #85ce61;
    //   }
    // }

    .add-btn,
    .add-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      border: 1px solid #ccc;
      margin-top: 5px;
      cursor: pointer;
      .close-icon {
        position: absolute;
        right: 3px;
        top: 3px;
        font-size: 16px;
        &:hover {
          color: red;
          font-weight: bold;
        }
      }
    }
  }
}

.annotated {
  overflow-y: scroll;

  & > div {
    margin-top: 8px;
  }
}
.app-container {
  min-height: calc(100vh - 84px);

  /* 基于视口宽度 */
  @media (max-width: 600px) {
    /* 当视口宽度小于等于 600 像素时应用的样式 */
    .main {
      flex-direction: column;
      height: 100% !important;
    }
    .main-left_bot {
      margin-bottom: 0 !important;
    }

    .articleModal {
      flex-direction: column;
      .leftContent {
        width: 100%;
        .annotated {
          height: auto;
        }
      }
      .centerContent {
        width: 100%;
        margin: 15px 0;
        .el-card__body {
          padding: 0;
        }
      }
      .rightContent {
        width: 100%;
      }
    }

    .el-card__body {
      padding: 5px;
    }
  }
  .main {
    height: calc(100vh - 124px);
    width: 100%;
    display: flex;
    &-left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 4;
      &_top {
      }
      &_bot {
        margin-bottom: 150px;
        font-size: 17px;
        font-weight: bold;
        line-height: 50px;
      }
    }
    &-right {
      flex: 5;
    }
  }
}
</style>
